<!--
 * @Description: 
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-09 17:35:10
-->
<template>
  <div>
    <van-nav-bar
      title="常用地址"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
/>  
    <!--{{addressData}}- -->
    <van-address-list class="address-list" v-model="chosenAddressId"
    :list="addressData"
    />
    <!--bottom nav bar-->
    

    <div class="address-add">
      <van-button round type="primary"
      is-link @click="showPopup"
      >新增地址
      <div class="">
        <van-popup 
          v-model="show"
          round
          position="bottom"
          closeable
          :style="{ height: '45%' }"
          get-container="body"
        >

        <div class="content">
          <p class="popup">新建地址</p>
          <van-address-edit
          :area-list="areaList"
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @change-detail="onChangeDetail"
          />
        </div>

        </van-popup>
      </div>
      </van-button>
      
    </div>
    
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import { pageQueryAddress } from "@/api/index.js";
import { Button } from "vant";
export default {
  data() {
    return {
      //addressData:[],
      chosenAddressId: '1',
      addressData:[],
      show: false,
    };
  },
  computed: {},
  methods: {
    async loadAddress(){
      let res = await pageQueryAddress({page:1,pageSize:6,});
      //this.addressData = res.data.data.list;
      let data = res.data.data.list
      data.forEach(address => {
        let newdata = {
          id:address.id,
          name:address.username,
          tel:address.telephone,
          address:`${address.province}${address.city}${address.area}${address.address}`,
          isDeafaulet:Boolean(address.isDefault),
        }
        this.addressData.push(newdata)
      });
    },

    showPopup() {
      this.show = true;
    },

    onSave() {
      Toast('save');
    },

  },
  created() {
    this.loadAddress();
    //this.showPopup();
  },
  mounted() {}
};
</script>
<style scoped>
.van-button{
  background-image: linear-gradient(90deg,#7579ff,#bf73ff);
  border:none;
  width:70%;
  position:fixed;
  bottom:4em;
  left:15%; ;
}
 .popup{
   text-align: center;
   font-size: 16px;
   margin-top: 15px;
 }

 .popup-text{
   margin-top: 13px;
 }

</style>